import React, {Component} from 'react';
import {Dimensions, View, Animated} from 'react-native';
import {Container, Content, Footer, FooterTab, Button} from 'native-base';
import {connect} from 'react-redux';
import Nav from './HomePage/Nav';
import Group from './HomePage/Group';
import Work from './HomePage/Work';
import Me from './HomePage/Me';
import TabIcon from './HomePage/TabIcon';
import TabText from './HomePage/TabText';
import GroupDropdown from './HomePage/GroupDropdown';
import DoubleExitApp from './LoginPage/DoubleExitApp';

const wW = Dimensions.get('window').width;

@connect(state => ({state: {...state.home}}))
class HomePage extends Component {
	
	constructor(...args) {
		super(...args);
		// 转页参数
		this.pageX = new Animated.Value(0);
		this.changePageX = this.changePageX.bind(this);
		this.changePage = this.changePage.bind(this);
	}
	
	// 转页函数
	changePageX(index) {
		Animated.timing(
			this.pageX,
			{
				toValue: - wW * index,
				duration: 130,
				useNativeDriver: true
			}
		).start();
	}
	
	changePage(toTab) {
		let index;
		switch (toTab){
			case 'group':
				index = 0;
				break;
			case 'work':
				index = 1;
				break;
			case 'me':
				index = 2;
				break;
		}
		this.changePageX(index);
		this.props.dispatch({type: 'home/changeTab', payload: toTab});
	}
	
	render() {
		let {state, dispatch} = this.props;
		let navNode;
		let contentNodes;
		switch (state.tab) {
			case 'group':
				navNode = <Nav title='群组' hiddenBack={true} rightContent={<GroupDropdown />} />;
				break;
			case 'work':
				navNode = <Nav title='任务' hiddenBack={true} />;
				break;
			case 'me':
				break;
		}
		return (
			<Container>
				{navNode}
				<Animated.View style={{
					flex:1,
					flexDirection: 'row',
					width: wW * 3,
					transform: [
	                    {translateX: this.pageX},
                	]
				}}>
					<Group />
					<Work />
					<Me />
				</Animated.View>
		        <Footer>
					<FooterTab style={{backgroundColor: '#ffffff'}}>
			            <Button onPress={() => {
			            	this.changePage('group');
			            }}>
			              	<TabIcon type='group' />
			              	<TabText type='group' value='群组' />
			            </Button>
			            <Button onPress={() => {
			            	this.changePage('work');
			            }}>
			              	<TabIcon type='work' />
			              	<TabText type='work' value='任务' />
			            </Button>
			            <Button onPress={() => {
			            	this.changePage('me');
			            }}>
			              	<TabIcon type='me' />
			              	<TabText type='me' value='我的' />
			            </Button>
		          	</FooterTab>
		        </Footer>
		        <DoubleExitApp />
			</Container>
		);
	}
	
	componentDidMount() {
  		this.props.dispatch({type: 'home/listGroupByUserId'});
	}
	
}

export default HomePage;
